<template>
  <div class="app-container" v-loading="loading">
    <el-form :inline="true" :model="queryParams">
      <div style="display: flex; flex-wrap: wrap">
        <el-col :span="4">
          <el-form-item>
            <el-input
              v-model="queryParams.outCode"
              placeholder="出库单号"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-select
              clearable
              style="width: 100%"
              placeholder="订单类型"
              v-model="queryParams.orderType"
            >
              <template v-for="(item, index) in out_order_type" :key="index">
                <el-option :label="item.label" :value="item.value"></el-option>
              </template>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input
              v-model="queryParams.erpCodeParent"
              placeholder="关联订单号"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input
              v-model="queryParams.erpCode"
              placeholder="关联子单号"
              clearable
            />
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item>
            <el-input
              v-model="queryParams.batchCode"
              placeholder="波次号"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input
              v-model="queryParams.skuName"
              placeholder="商品名称"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input
              v-model="queryParams.delivery"
              placeholder="配送方式"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input
              v-model="queryParams.wayBillNum"
              placeholder="运单号"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input
              v-model="queryParams.receiver"
              placeholder="收货人"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input
              v-model="queryParams.receiverPhone"
              :maxlength="11"
              @input="
                queryParams.receiverPhone = limitIntNumber(
                  queryParams.receiverPhone
                )
              "
              placeholder="手机号"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-date-picker
              style="width: 100%"
              v-model="fkDate"
              start-placeholder="客户付款时间"
              end-placeholder="客户付款时间"
              range-separator="-"
              type="datetimerange"
              value-format="YYYY-MM-DD HH:mm:ss"
              unlink-panels
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-date-picker
              style="width: 100%"
              v-model="ckDate"
              start-placeholder="称重出库时间"
              end-placeholder="称重出库时间"
              range-separator="-"
              type="datetimerange"
              value-format="YYYY-MM-DD HH:mm:ss"
              unlink-panels
            />
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item>
            <el-button icon="Search" type="primary" @click="getList"
              >查询</el-button
            >
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </div>
    </el-form>
    <div>
      <el-button type="primary">导出</el-button>
    </div>
    <vxe-table
      border
      style="margin-top: 10px"
      align="center"
      :data="tableList"
      :height="tableHeight"
      :checkbox-config="{ trigger: 'row' }"
      :row-config="{ isCurrent: true, isHover: true }"
    >
      <vxe-column type="checkbox" width="60"></vxe-column>
      <vxe-column type="seq" width="80" title="序号" tree-node></vxe-column>
      <vxe-column field="outCode" width="220" title="出库单号"></vxe-column>
      <vxe-column field="orderType" width="150" title="订单类型">
        <template #default="{ row }">
          {{ returnDictLabel(out_order_type, row.orderType) }}
        </template>
      </vxe-column>
      <vxe-column field="erpCode" width="100" title="关联订单号"></vxe-column>
      <vxe-column field="erpCode" width="150" title="关联子单号"></vxe-column>
      <vxe-column field="outNum" width="220" title="出库数量"></vxe-column>
      <vxe-column field="batchCode" width="150" title="波次号"></vxe-column>
      <vxe-column field="skuCode" width="120" title="SKU编码"></vxe-column>
      <vxe-column field="skuName" width="120" title="商品名称"></vxe-column>
      <vxe-column field="skuImg" width="180" title="商品图片">
        <template #default="{ row }">
          <ImagePreview
            v-if="row.skuImg"
            :width="150"
            :height="50"
            :src="row.skuImg"
          ></ImagePreview>
        </template>
      </vxe-column>
      <vxe-column field="companyName" width="150" title="公司名称"></vxe-column>
      <vxe-column
        field="warehouseName"
        width="150"
        title="仓库名称"
      ></vxe-column>
      <vxe-column field="delivery" width="100" title="配送方式"></vxe-column>
      <vxe-column field="wayBillNum" width="120" title="运单号"></vxe-column>
      <vxe-column
        field="outWeigh"
        width="100"
        title="出库称重(kg)"
      ></vxe-column>
      <vxe-column field="receiver" width="100" title="收货人"></vxe-column>
      <vxe-column field="receiverPhone" width="120" title="手机号"></vxe-column>
      <vxe-column
        field="receiverAddress"
        width="200"
        title="收货地址"
      ></vxe-column>
      <vxe-column field="remark" width="200" title="备注"></vxe-column>
      <vxe-column
        field="erpOrderTime"
        width="200"
        title="客户付款时间"
      ></vxe-column>
      <vxe-column field="outTime" width="200" title="称重出库时间"></vxe-column>
    </vxe-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script setup>
import { nextTick, onMounted, reactive, ref } from "vue";
import ImagePreview from "@/components/ImagePreview/index.vue";
import { getOnLineDetailList } from "@/api/scApi";

const { proxy } = getCurrentInstance();
const { out_order_type } = proxy.useDict("out_order_type");

const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
});
let loading = ref(false);
let total = ref(1);

let fkDate = ref([]); //付款时间
let ckDate = ref([]); //出库称重时间
let tableHeight = ref(0);
nextTick(() => {
  tableHeight.value = window.innerHeight - 330;
});
window.onresize = () => {
  tableHeight.value = document.body.scrollHeight - 330;
};

let tableList = ref([]);

function getList() {
  loading.value = true;
  queryParams.value.erpOrderTimeStart = fkDate.value[0];
  queryParams.value.erpOrderTimeEnd = fkDate.value[1];
  queryParams.value.outWeighTimeStart = ckDate.value[0];
  queryParams.value.outWeighTimeEnd = ckDate.value[1];
  let params = {
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize,
    param: queryParams.value,
  };
  getOnLineDetailList(params)
    .then((res) => {
      if (res.code === 200) {
        loading.value = false;
        tableList.value = res.data;
        total.value = res.total;
      }
    })
    .finally(() => {
      loading.value = false;
    });
}

onMounted(() => {
  getList();
});

const resetQuery = () => {
  fkDate.value = [];
  ckDate.value = [];
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
  };
  getList();
};
</script>

<style scoped lang="scss">
.el-form-item {
  width: 90%;
}
</style>
